<template>
  <div class="userDetail">
    <h2>详细介绍</h2>
    <el-descriptions
      style="width: 100%; margin-top: 2%; margin-left: 1%; font-size: 15px"
      direction="vertical"
      :column="4"
      border
    >
      <el-descriptions-item label="账号" :span="2"> {{ ruleForm.uid }} </el-descriptions-item>
      <el-descriptions-item label="姓名" :span="2">
        {{ ruleForm.username }}
      </el-descriptions-item>
      <el-descriptions-item label="性别" :span="2">
        <el-tag size="small"> {{ ruleForm.gender }} </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="注册时间" :span="2">
        {{ ruleForm.addTime }}
      </el-descriptions-item>
      <el-descriptions-item label="电话" :span="2">
        <el-tag size="small" type="danger"> {{ ruleForm.phone }} </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="邮箱" :span="2"> {{ ruleForm.email }} </el-descriptions-item>
    </el-descriptions>
    <div style="width: 100%; margin-top: 50px">
      <el-button type="warning" style="" @click="router.push('/userSta')" plain
        >点击查看我的观影偏好</el-button
      >
    </div>
  </div>
</template>
<script setup>
import { reactive } from 'vue';
import router from '@/router';
const ruleForm = reactive({
  uid: '',
  username: '',
  gender: '',
  password: '',
  addTime: '',
  phone: '',
  email: '',
  headSrc: '',
});
ruleForm.uid = JSON.parse(sessionStorage.getItem('uid'));
ruleForm.username = JSON.parse(sessionStorage.getItem('username'));
ruleForm.gender = JSON.parse(sessionStorage.getItem('gender'));
ruleForm.addTime = JSON.parse(sessionStorage.getItem('addTime'));
ruleForm.phone = JSON.parse(sessionStorage.getItem('phone'));
ruleForm.email = JSON.parse(sessionStorage.getItem('email'));
ruleForm.headSrc = JSON.parse(sessionStorage.getItem('headSrc'));
</script>
<style lang="scss" scoped>
.userDetail {
  width: 100%;
  height: 480px;
  float: left;
  margin-right: -30px;
  overflow: auto;
  background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
}
</style>
